<template>
  <div id="contianer">
    <div class="mapPage">
      <div class="left">
        <div class="screen_model">
          <el-row :gutter="20">
            <el-col prop="keyWords" :span="5">
              <el-input
                size="small"
                v-model="searchForm.keyWords"
                placeholder="检索内容"
                clearable
              ></el-input>
            </el-col>
            <el-col prop="professionList" :span="5">
              <el-select
                v-model="searchForm.professionList"
                multiple
                style="width: 100%"
                placeholder="专业类型"
                clearable
              >
                <el-option
                  v-for="(item, index) in majorTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option
              ></el-select>
            </el-col>
            <el-col prop="typeList" :span="10">
              <el-select
                v-model="searchForm.typeList"
                multiple
                placeholder="文件类型"
              >
                <el-option
                  v-for="(item, index) in fileTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option
              ></el-select>
            </el-col>
            <el-col
              :span="4"
              style="display: flex; justify-content: end; float: right"
            >
              <el-button type="primary" @click="getKnowledgeList()" size="small"
                >查询</el-button
              >
              <el-button @click="resetSearch()" size="small">重置</el-button>
            </el-col>
          </el-row>
          <div class="t_tab">
            <div
              class="tab_item"
              :class="{
                tab_item_active: item.value === activeTab,
              }"
              v-for="(item, index) in tabArray"
              :key="index"
              @click="tabChange(item)"
            >
              {{ item.label
              }}<img
                :src="
                  item.value === activeTab
                    ? require('@/assets/images/sort_white.png')
                    : require('@/assets/images/sort_black.png')
                "
                style="width: 16px; height: 16px; margin-left: 5px"
              />
            </div>
          </div>
        </div>

            <div class="knowledgeList" :style="leftClientHeight" v-loading="loading">
          <div
            v-for="(item, index) in tableData"
            :key="index"
            class="knowledgeList_item"
          >
            <div
              class="number"
              :style="
                index === 0
                  ? 'color: #F53F3F'
                  : index === 1
                  ? 'color: #FAAD14'
                  : ''
              "
            >
              {{ index + 1 }}
            </div>
            <div class="info">
              <div class="info_title">{{ item.fileName }}</div>
              <div class="info_content knowledge" v-if="item.ext.items.length > 0">
                <span class="info_title_label">相关知识：</span>{{item.ext.items[0] && item.ext.items[0].text }}
              </div>
              <div class="info_content">
                <div><span class="info_title_label">上传日期：</span>{{ item.updateTime }}</div>
                <div style="margin-left: 20px">
                  <span class="info_title_label">总收藏数：</span><span style="color: #F53F3F;">{{ item.collectNumber }}</span>
                </div>
                <div class="info_content_label">
                  {{ item.professionName }}
                </div>
              </div>
            </div>
            <div class="collect">
              <img
                class="nomore"
                :src="
                  item.collect == 1
                    ? require('@/assets/images/collect_yes.png')
                    : require('@/assets/images/collect_no.png')
                "
                style="width: 22px; height: 22px"
                @click.stop="handleLike(item)"
              />
              <div>
                <el-button type="primary" @click="previewFn(item)" size="small"
                  >查看详情</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <div class="right">
        <div class="right_top">
          <div class="title">
            <div>热词推荐</div>
            <el-link @click="getHotWords"
              >换一换<i class="el-icon-refresh el-icon--right"></i
            ></el-link>
          </div>
          <div class="right_top_box" v-if="tags.length>0">
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :type="tag.active ? '' : 'info'"
              class="tag_item"
              @click="handleTag(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
        <div class="right_middle">
          <div class="title">
            <div>热门工艺知识TOP10</div>
          </div>

          <div class="top10_box" :style="rightClientHeight">
            <div
              v-for="(item, index) in topTableData"
              :key="index"
              class="top10_box_item"
              @click.stop="previewFn(item,'top10')"
            >
              <div
                class="number"
                :style="
                  index === 0
                    ? 'color: #F53F3F'
                    : index === 1
                    ? 'color: #FAAD14'
                    : ''
                "
              >
                {{ index + 1 }}
              </div>
              <div class="info">
                <div class="info_title">
                  {{ item.fileName }}
                </div>
                <div class="info_content">
                  {{ item.author }} {{ item.uploadTime }}
                </div>
              </div>
              <div class="collect">
                <img
                  class="nomore"
                  :src="
                    item.collect === 1
                      ? require('@/assets/images/collect_yes.png')
                      : require('@/assets/images/collect_no.png')
                  "
                  style="width: 22px; height: 22px"
                  @click.stop="handleLike(item)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 预览文档 -->
    <el-dialog
      class="fullscreen_preview"
      :visible.sync="previewVisible"
      fullscreen
      center>
      <div slot="title" class="header_button">
      <img class="icon" @click="changeLike"
           :src="addForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')"/>
      <span>{{ addForm.likeNumber || '' }}</span>
      <img class="icon" @click="changeCollect()"
           :src="addForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')"/>
      <span>{{ addForm.collectNumber || '' }}</span>
    </div>
      <div class="main">
        <div class="file_box">
          <iframe
            v-loading="previewLoading"
            id="iframe"
            ref="iframe"
            src=""
            frameborder="0"
            width="100%"
            height="100%"
          ></iframe>
        </div>
        <div class="tag_box" v-if="navigationList.length>0">
          <h2>
            <span>知识导航条</span>
          </h2>
          <div
            v-for="tag in navigationList"
            :key="tag.node_id"
            class="navigation_item"
            :class="tag.node_id === activeTag.id ? 'tag_active' : ''"
            @click="handleNavigation(tag)"
          >
            {{ tag.text }}
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 预览视频 -->
    <el-dialog
      class="fullscreen_preview"
      :visible.sync="videoVideoVisible"
      fullscreen
      center>
      <div slot="title" class="header_button">
        <img class="icon" @click="changeLike"
             :src="addForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')"/>
        <span>{{ addForm.likeNumber || '' }}</span>
        <img class="icon" @click="changeCollect()"
             :src="addForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')"/>
        <span>{{ addForm.collectNumber || '' }}</span>
      </div>
      <div class="main">
        <div class="file_box">
          <div class="video_model">
            <div id="video"></div>
          </div>
        </div>
        <div class="tag_box">
          <h2>
            <span>知识导航条</span>
          </h2>
          <div
            v-for="tag in navigationList"
            :key="tag.node_id"
            class="navigation_item"
            :class="tag.node_id === activeTag.id ? 'tag_active' : ''"
            @click="handleNavigation(tag)"
          >
            {{ tag.text }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      previewVisible: false,
      previewLoading: false,
      videoVideoVisible: false,
      selectText: "",
      topTableData: [],
      tags: [],
      analysisData: {},
      downloadUrl: "",
      activeTag: {},
      navigationList: [],
      dataInfo: null,
      tabArray: [
        { value: "01", label: "相关性", number: 1 },
        { value: "02", label: "更新日期", number: 3 },
        { value: "03", label: "总收藏数", number: 2 },
      ],
      fileTypeList: [],
      majorTypeList: [],
      activeTab: "框架",
      batchImportVisible: false,
      tableData: [],
      searchForm: {
        keyWords: "",
        professionList: [],
        typeList: [],
        pageNumber: 1,
        pageSize: 10,
        orderBy: "",
        sort: "",
      },
      appList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      ruleForm: {},
      player: null,
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "change" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },

      //pdf、视频预览
      addForm: {
        like: 0,
        collect: 0,
        likeNumber: 0,
        collectNumber: 0,
        selected: false
      },
      collectLikeId: '',
    };
  },
  computed: {
    leftClientHeight() {
      let tableClientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      tableClientHeight = tableClientHeight - 329;
      return { height: tableClientHeight + "px" };
    },
    rightClientHeight() {
      let tableClientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      tableClientHeight = tableClientHeight - 375;
      return { height: tableClientHeight + "px" };
    },
  },
  mounted() {
    this.fileTypeListFn();
    this.majorTypeListFn();
    this.getHotKnowledge();
    this.getHotWords();
    this.getKnowledgeList();
  },
  watch: {
    videoVideoVisible(newVal, oldVal) {
      if (newVal === false) {
        this.player.destroy();
      }
    },
  },
  methods: {
    //pdf、视频预览
    changeLike() {
      let url = this.addForm.like==1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
      this.$http({
        url: url,
        method: 'post',
        data: {
          collectType: 1,
          knowledgeFileId: this.collectLikeId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          this.$message.success(this.addForm.like==1?'取消点赞成功':'点赞成功')
          this.getCollectLike()
        }
      })
    },
    changeCollect() {
      let url = this.addForm.collect==1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
      this.$http({
        url: url,
        method: 'post',
        data: {
          collectType: 2,
          knowledgeFileId: this.collectLikeId
        }
      }).then(({data}) => {
        console.log(data, 'llll')
        if (data.code == 200) {
          this.$message.success(this.addForm.collect==1?'取消收藏成功':'收藏成功')
          this.getCollectLike()
          this.updateCollectStatus(this.collectLikeId, this.addForm.collect == 1 ? 0 : 1, this.addForm.collect == 1 ? -1 : 1);
          this.addForm.collect = this.addForm.collect == 1 ? 0 : 1;
          this.addForm.collectNumber = this.addForm.collect == 1 ? this.addForm.collectNumber - 1 : this.addForm.collectNumber + 1;
        }
      })
    },
    getCollectLike() {
      this.$http({
        url: '/knowledgeData/addView',
        method: 'post',
        data: {
          id: this.collectLikeId,
        }
      }).then(({data}) => {
        this.addForm = data.data
        this.updateCollectStatus(this.collectLikeId, this.addForm.collect, this.addForm.collect == 1 ? 1 : -1);
      });
    },
    fileTypeListFn() {
      this.$http({
        url: "/dict/file/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.fileTypeList = data.data.data;
      });
    },
    majorTypeListFn() {
      this.$http({
        url: "/dict/major/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.majorTypeList = data.data.data;
      });
    },
    resetSearch() {
      this.searchForm.keyWords = "";
      (this.searchForm.professionList = []), (this.searchForm.typeList = []);
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.orderBy = "";
      this.activeTab = "";
      this.getKnowledgeList();
    },
    handleLike(item) {
      let url =
        item.collect === 1
          ? "/knowledgeCollect/delete"
          : "/knowledgeCollect/add";
      this.$http({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          this.$message.success("取消收藏");
          item.collect = 0;
          item.collectNumber =  item.collectNumber -1
        } else {
          this.$message.success("已收藏");
          item.collect = 1;
          item.collectNumber = item.collectNumber +1
        }
        this.$forceUpdate();
        this.updateCollectStatus(item.id, item.collect, item.collect == 1 ? 1 : -1);
      });
    },
    handleTag(tag) {
      this.tags.map((item) => {
        if (item.name === tag.name) {
          this.$set(item, "active", !item.active);
          this.searchForm.keyWords = item.active ? item.name : "";
          this.getKnowledgeList();
        } else {
          this.$set(item, "active", false);
        }
      });
    },
    // 知识导航条切换
    handleNavigation(navigation) {
      let text = []
      if(navigation.trace_location.table_index){
       text = navigation.trace_location.table_index == -1 ? navigation.text : navigation.trace_location.pdf_search_str;

      }else{
        text = navigation.text
      }
      console.log('知识导航条切换',  navigation)
      this.$set(this.activeTag, "id", navigation.node_id);
      // this.$set(this.activeTag, "labelName", navigation.text);
      this.$set(this.activeTag, "labelName", text);
      // 需要判断当前是文件还是视频
      if (this.dataInfo.fileType == "video") {
        console.log("navigation--->", navigation);
        // 操作视频播放器跳到对应位置 文件解析进入到对应位置
        this.player.seek(navigation.seg_time[0]);
      } else {
        setTimeout(() => {
          let iframe = document.getElementById("iframe");
          let iframeWindow = iframe.contentWindow;
          let iframeDocument = iframe.contentDocument || iframeWindow.document;
          let hidden = iframeDocument.getElementById("findbar");
          hidden.classList.remove("hidden");
          let findInput = iframeDocument.getElementById("findInput");
          // findInput.value = navigation.text;
          findInput.value = text;
          findInput.focus();
          iframeDocument.getElementById("findHighlightAll").click();
          iframeDocument.getElementById("findHighlightAll").click();
        }, 0);
      }
    },
    // 预览
    previewFn(row,tag) {
      let that = this;
      console.log(row, "55555");
      this.$set(this.activeTag, "id", "");
      this.$set(this.activeTag, "labelName", "");
      if(tag){
        this.navigationList = []
      }else{
        this.navigationList = row.ext.items.filter((word) =>
        word.chunk_type.includes("paragraph")
      );
      }
      console.log('this.navigationList88888888',this.navigationList)

      this.dataInfo = row;
      this.collectLikeId = row.id;
      this.getCollectLike()
      this.$http({
        url: "/knowledgeData/release/preview",
        method: "get",
        params: {
          id: row.id,
        },
      }).then(({ data }) => {
        if (data.readAuthority == false) {
          this.$message.warning("当前文件不可预览");
          return;
        }
        if (row.fileType == "video") {
          that.videoVideoVisible = true;
          that.$http({
              url: "/knowledgeData/video/verification",
              method: "get",
              params: {
                id: row.id,
              },
            })
            .then(({ data }) => {
              that.analysisData = JSON.parse(data.data.videoJson);
              console.log(that.analysisData, "4444");
            });
          console.log("获取文件之后地址", this.$config.VUE_APP_BASE_API+data.data.downloadUrl);
          setTimeout(() => {
            that.player = new that.$Player({
              id: "video", // 元素id
              lang: "zh", // 设置中文
              volume: 0, // 默认静音
              autoplay: false, // 自动播放
              screenShot: false, // 开启截图功能
              height: 200,
              // 视频地址
              url: this.$config.VUE_APP_BASE_API+data.data.downloadUrl,
              // 封面图
              // poster:'',
              fluid: true, // 填满屏幕 （流式布局）
              playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
            });
            // 监听播放进度事件
            that.player.on("timeupdate", that.onTimeUpdate);
            that.handleNavigation(this.navigationList[0])
          }, 300);

          return;
        }
        console.log("获取文件之后地址", this.$config.VUE_APP_BASE_API+data.data.downloadUrl);
        this.downloadUrl = this.$config.VUE_APP_BASE_API+data.data.downloadUrl;
        this.previewVisible = true;
        setTimeout(() => {
          var iframe = document.querySelector("#iframe");
          this.populateIframe(
            iframe,
            [["token", +localStorage.getItem("token")]],
            this.$config.VUE_APP_BASE_API+data.data.downloadUrl
          );

          this.handleNavigation(this.navigationList[0])
        }, 0);
      });
    },
    populateIframe(iframe, headers, url) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.responseType = "blob";
      headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1]);
      });
      // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Key-MD5", "m7AXuOLSaEQc1369IHCZGw==")
      // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Algorithm", "AES256")
      // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Key", "5svVq6aMjTLMBTD0yaIT9u735QnpHteabx6nFZUXvac=")
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          if (xhr.status === 200) {
            console.log(URL.createObjectURL(xhr.response), "ffff");
            this.previewUrl = URL.createObjectURL(xhr.response);
            console.log(
              "预览地址",
              URL.createObjectURL(xhr.response),
              this.activeTag
            );

            iframe.src =
              "./static/pdfjs/web/viewer.html?keyword=" +
              this.activeTag.labelName +
              "&file=" +
              URL.createObjectURL(xhr.response);
          }
        }
      };
      xhr.send();
    },
    onTimeUpdate(currentTime) {
      //   console.log("Current time:", currentTime.currentTime);
      this.navigationList.map((item) => {
        if (
          currentTime.currentTime > item.seg_time[0] &&
          currentTime.currentTime < item.seg_time[1]
        ) {
          this.$set(this.activeTag, "id", item.node_id);
          this.$set(this.activeTag, "labelName", item.text);
        }
      });
    },
    // 切换tab
    tabChange(d) {
      this.pageNo = 1;
      this.searchForm.orderBy = d.number
      if (this.activeTab === d.value) {
        this.activeTab = "";
      } else {
        this.activeTab = d.value;
      }
      this.getKnowledgeList()
    },
    view() {},
    edit() {},
    quitCollection() {},
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getKnowledgeList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getKnowledgeList();
    },
    getHotKnowledge() {
      this.$http({
        url: "/knowledgeSearch/hotKnowledge",
        method: "get",
        params: {},
      })
        .then(({ data }) => {
          if (data) {
            this.topTableData = data.data;
          }
        })
        .catch(() => {});
    },
    getHotWords() {
      // this.tags = [];
      this.$http({
        url: "/knowledgeSearch/hot",
        method: "get",
        params: {},
      }).then(({ data }) => {
        if (data) {
          const arr = [];
          this.tags = data.data.reduce((acc, item) => {
            return [...acc, { active: false, name: item }];
          }, []);
          return;
          data.data.forEach((item) => {
            arr.push({
              active: false,
              name: item,
            });
          });

          setTimeout(() => {
            this.tags = arr;
          }, 100);
        }
      });
    },
    getKnowledgeList() {
      this.loading = true
      let paramsTypeList = "";
      let paramsProfessionList = "";
      if (this.searchForm.professionList.length > 0) {
        paramsProfessionList = this.searchForm.professionList.join(",");
      }
      if (this.searchForm.typeList.length > 0) {
        paramsTypeList = this.searchForm.typeList.join(",");
      }
      this.$http({
        url: "/knowledgeSearch/search",
        method: "get",
        params: {
          keyWords: this.searchForm.keyWords,
          professionList: paramsProfessionList,
          typeList: paramsTypeList,
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
          // orderBy: this.searchForm.orderBy,
          sort: this.searchForm.orderBy,
        },
      }).then(({ data }) => {
        this.loading = false;
        if (data.data) {
          this.tableData = data.data.data || [];
          this.total = data.data.totalSize;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    updateCollectStatus(id, collectStatus, collectNumberChange) {
      // 更新 tableData
      const tableIndex = this.tableData.findIndex(item => item.id === id);
      if (tableIndex !== -1) {
        this.$set(this.tableData[tableIndex], 'collect', collectStatus);
        this.$set(this.tableData[tableIndex], 'collectNumber', this.tableData[tableIndex].collectNumber + collectNumberChange);
      }

      // 更新 topTableData
      const topTableIndex = this.topTableData.findIndex(item => item.id === id);
      if (topTableIndex !== -1) {
        this.$set(this.topTableData[topTableIndex], 'collect', collectStatus);
        this.$set(this.topTableData[topTableIndex], 'collectNumber', this.topTableData[topTableIndex].collectNumber + collectNumberChange);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#contianer {
  width: 100%;
  height: 100%;
  padding: 20px;
  .mapPage {
    display: flex;
    .left {
      background: #fff;
      width: 70%;
      margin-right: 10px;
      padding: 20px;
      .screen_model {
        // margin-bottom: 20px;
        .t_tab {
          margin: 20px 0;
          display: flex;
          .tab_item {
            width: 120px;
            height: 32px;
            border-radius: 2px;
            box-sizing: border-box;
            font-family: 思源黑体;
            font-size: 14px;
            font-weight: normal;
            white-space: nowrap;
            padding: 5px 20px;
            margin-right: 5px;
            display: flex;
            align-items: center;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            transition: all 0.3s ease 0s;
            &:hover {
              opacity: 0.65;
            }
          }

          .tab_item_active {
            font-weight: bold;
            background: #0081f5;
            color: #fff;
            // border-bottom: 2px solid #0081f5;
          }
          .advancedClass {
            margin-left: auto;
            img {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin: 0 5px 0 0;
            }
          }
        }
      }
      .knowledgeList {
        overflow-y: auto;
        .knowledgeList_item {
          margin-bottom: 10px;
          background: #f9fbfc;
          border: 1px dashed #dcdee1;
          display: flex;
          justify-content: space-between;
          padding: 10px;
          .number {
            width: 40px;
          }
          .info {
            width: 90%;
            .info_title {
              font-family: 思源黑体;
              font-size: 20px;
              font-weight: normal;
              color: #1C2126;
            }
            .info_content.knowledge {
              //height: 120px;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 99%;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-align: justify;
              word-break: break-all;
            }
            .info_content {
              margin-top: 5px;
              display: flex;
              align-items: center;
              color: #1C2126;
              font-family: 思源黑体;
              font-size: 14px;
              font-weight: normal;
              .info_title_label{
                color: #4C5A67;
              }
              .info_content_label {
                border-radius: 16px;
                background: #0084ff;
                color: #fff;
                padding: 2px 10px;
                margin-left: 20px;
              }
            }
          }
          .collect {
            text-align: center;
            .nomore {
              cursor: pointer;
            }
          }
        }
      }
    }
    .right {
      flex: 1;
      display: grid;
      .title{
        font-family: 思源黑体;
        font-size: 16px;
        font-weight: normal;
        color: #1C2126;
        text-indent: 10px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d8d8d8;
        margin: 0 24px;
        position: relative;
        &:before{
          content: '';
          position: absolute;
          top: 12px;
          bottom: 12px;
          left: 0;
          border-left: 3px solid #0084FF;
        }
      }
      .right_top {
        background: #fff;
        .right_top_box {
          /*display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;
          height: 17vh;
          overflow: hidden;*/
          display: grid;
          padding: 10px 34px;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px 10px;
        }
        .tag_item {
          /*width: 29%;
          margin: 10px 2%;*/
          //background: #F9FBFC;
          //color: #1C2126;
          font-family: 思源黑体;
          text-align: center;
          font-size: 14px;
          cursor: pointer;
          height: 35px;
          line-height: 35px;
          border-radius: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
        // .tag_active {
        //     background: #67deb2;
        //     color: #fff;
        // }
      }
      .right_middle {
        // margin-top: 10px;
        background: #fff;
        .personal_left_table {
          height: 483px;
          overflow-y: auto;
        }
        .top10_box {
          padding: 0 34px;
          overflow-y: auto;
          .top10_box_item {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #d8d8d8;
            padding: 20px 0;
            .number {
              width: 30px;
              font-size: 22px;
            }
            .info {
              width: 100%;
              .info_title {
                // font-size: 22px;
                margin-bottom: 10px;
                margin-right: 10px;
                font-family: 思源黑体;
                font-size: 14px;
                font-weight: normal;
                color: #1C2126;
                cursor: pointer;
              }
              .info_content {
                font-family: 思源黑体;
                font-size: 14px;
                font-weight: normal;
                color: #4C5A67;
              }
            }
            .collect {
              width: 30px;

              .nomore {
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}

.main {
  display: flex;
  height: 100%;
  .file_box {
    flex: 1;
    // width: 50%;
    border-right: 1px solid #d8d8d8;
  }
  .video_text_box {
    width: 30%;
    border-right: 1px solid #d8d8d8;
    overflow: auto;
    .box-card {
      margin-bottom: 10px;
    }
    ::v-deep .el-textarea__inner {
      text-align: justify;
    }
  }
  .tag_box {
    width: 20%;
    padding-left: 10px;
    height: 100%;
    overflow: auto;
    .navigation_item {
      margin: 10px;
      padding: 10px;
      background: #f1f2f5;
      cursor: pointer;
      text-align: justify;
      // border:1px solid red;
    }
    .tag_active {
      background: #67deb2;
      color: #fff;
    }
  }
  .video_model {
    width: 100%;
    height: 100%;
    #video {
      width: 100%;
      height: 100% !important;
    }
  }
}
:v-deep .el-tag {
  transition: all 0.3s ease !important; /* 平滑过渡 */
}
</style>
